iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 13
0
Modern Web

和少女工程師一起學 JavaScript 系列 第 13

和少女工程師一起學 JavaScript:Day13 this

  • 分享至 

  • xImage
  •  

this 是 function 執行時,自動生成的一個內部物件。
在大多數的情況下, this 代表的就是呼叫 function 的物件

this 的調用方式

  1. 作為物件方法(最常使用)

    obj.fn()
    
    • this 與函式如何宣告沒有關聯性,僅與呼叫方法有關
    • 只需知道在哪個物件下被呼叫

    範例:只需知道在哪個物件下被呼叫

    function callName(){
    	console.log(this, this.myName)
    }
    var family = {
    	myName: '小明家',
    	callName: callName
    }
    family.callName();
    
    //整包family物件, 小明家
    因為是在family這個物件下被呼叫的,所以this是family
    
    function callName(){
    	console.log(this, this.myName)
    }
    var family = {
    	myName: '小明家',
    	callName: callName,
    	ming: {  //包兩層物件
    		myName: '小明',
    		callName: callName,
    	}
    }
    family.callName(); //整包family物件, 小明家
    family.ming.callName(); //整包ming物件, 小明
    
    

    範例:this 與呼叫位置有關

    var myName = '杰倫'
    
    var family = {
    	myName: '小明家',
    	callName: function(){
    		console.log(this.myName)
    	}
    }
    
    var callName = family.callName(); //小明家
    callName(); //杰倫
    因為在全域的環境下執行,所以this就不會指向函式
    
  2. 簡易呼叫 simple call(不建議在這使用 this)

    • this 是指向 window
    • 立即函式、callback 函式
    • 前面沒有物件
  3. bind, apply, call 方法 (把函式綁定特定 this 的方法)

以上範例來自六角學院 JS 核心影音課程


上一篇
和少女工程師一起學 JavaScript:Day12 函式傳入參數預設值
下一篇
和少女工程師一起學 JavaScript:Day14 let、const
系列文
和少女工程師一起學 JavaScript 27
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言